<template>
  <div class="root">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">问答</van-tabbar-item>
      <van-tabbar-item icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  setup(props) {
    const router = useRouter();
    const active = ref(0);
    const onChange = (index) => {
      if (index == 0) {
        router.push({
          path: "/",
        });
      } else if (index == 1) {
        router.push({
          path: "/answer",
        });
      } else if (index === 2) {
        router.push({
          path: "/video",
        });
      } else {
        router.push({
          path: "/person",
        });
      }
    };
    return {
      active,
      onChange,
    };
  },
};
</script>

<style>
.root {
  --van-nav-bar-background-color: rgb(51, 153, 255);
}
van-tabbar {
  --van-nav-bar-background-color: var(--van-background-color-light);
}
</style>